<template>
  <div class="h100 w100">
    <div class="sup-top" @click="gohome()">
      <img src="~@/assets/reception/logo.png" />
    </div>
    <div class="sup-detail">
      <div class="sup-detail-title">
        <span class="sup-detail-name">产品详情</span>
      </div>
      <div class="sup-parameter-title">
        <div class="sup-parameter-item" v-for="(item, index) in supParameter" :key="index">
          <span class="parameter-name">{{ item.name }}</span>
          <span class="parameter-value">{{ item.value }}</span>
        </div>
      </div>
      <div class="sup-img-detail">
        <img src="~@/assets/reception/supermarket/comDetail.png" alt="" >
      </div>
    </div>
    <div class="sup-bac-bottom">
      <img src="~@/assets/reception/background2.png" alt="" >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      supParameter:[
        {
          name: '品牌',
          value:'川胜电缆'
        },
        {
          name: '型号',
          value:'BBTRZ'
        },
      ]
    }
  },
  methods: {
    gohome() {
      this.$router.push({ path: '/reception/findServices/index' });
    },
  }
}
</script>

<style lang="less" scoped>
.sup-top{
  height: 60px;
  background: #fff;
  padding: 10px 100px ;
  cursor: pointer;
  img{
    height: 40px;
    display: block;
  }
}
.sup-detail{
  width: 1600px;
  margin: 0 auto;
  .sup-detail-title{
    width: 100%;
    margin: 0 20px;
    height: 60px;
    border: solid 1px #f3f3f3;
    overflow: hidden;

    .sup-detail-name{
      display: block;
      font-size:20px ;
      height: 100%;
      line-height: 55px;
      width: 200px;
      border: solid 1px #f3f3f3;
      text-align: center;
      color: #02b2b5;
      border-top: #02b2b5 solid 5px;
      overflow: hidden;
    }
  }
  .sup-parameter-title{
    width: 100%;
    margin: 20px;
    height: 60px;
    border: solid 1px #f3f3f3;
    overflow: hidden;
    display: flex;

    .sup-parameter-item{
      display: block;
      font-size:20px ;
      height: 100%;
      line-height: 55px;
      width: 50%;
      border: solid 1px #f3f3f3;
      text-align: center;
      overflow: hidden;
      display: flex;
      .parameter-name{
        display: block;
        width: 150px;
        background: #f8f8f8;
        border-right: solid 1px #f3f3f3;
      }
      .parameter-value{
        flex: 1;
      }
    }
  }
  .sup-img-detail{
    margin: 0 auto;
    img{
      display: block;
      margin: 0 auto;
    }
  }
}
.sup-bac-bottom{
  // position: absolute;
  // bottom: -400px;
  margin-top:20px ;
  width: 100%;
  img{
    height: 180px;
    width: 100%;
  }
}
</style>
